<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>成品转仓</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="material-transfer">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>
      <el-table fit stripe border :data="orderList" style="width:100%;" height="parent">
        <el-table-column sortable prop="orderId" label="系统订单编号" min-width="130px" header-align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.orderId!==''" class="table-btn" @click="lookProWarehouseDetail(scope.row)">
              {{scope.row.orderId}}
            </div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="companyOrderId" label="订单编号" min-width="130px" header-align="center">
        </el-table-column>
        <el-table-column sortable prop="factoryNo" label="工厂型号" min-width="130px" header-align="center">
        </el-table-column>
        <el-table-column sortable prop="customerNo" label="客户型号" min-width="130px" header-align="center">
        </el-table-column>
        <el-table-column sortable prop="colorDescription" label="描述" min-width="120px" header-align="center">
        </el-table-column>
        <el-table-column sortable :resizable="false" prop="rowIndex" label="订单序号" width="100px" align="center">
          <template slot-scope="scope">
            <span>{{scope.row.rowIndex===-1?globalConfig.orderDefaultRowIndex:scope.row.rowIndex}}</span>
          </template>
        </el-table-column>
        <el-table-column sortable :resizable="false" prop="count" column-key="count" label="合格数" width="120px" header-align="center"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-popover title="生产单位数量" trigger="hover" placement="right-start" :disabled="!scope.row.hasProduction">
              <div slot="reference" class="table-count-unit">
                {{scope.row.count}}
              </div>
              <production-unit-info :warehouse="scope.row"></production-unit-info>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column sortable :resizable="false" prop="noCount" column-key="noCount" label="不合格数" width="120px" header-align="center"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-popover title="生产单位数量" trigger="hover" placement="right-start" :disabled="!scope.row.hasProduction">
              <div slot="reference" class="table-count-unit">
                {{scope.row.noCount}}
              </div>
              <production-unit-info :warehouse="scope.row"></production-unit-info>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column sortable prop="unitPrice" label="单价" min-width="130px" align="center">
        </el-table-column>
        <el-table-column :resizable="false" label="操作" width="80px" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="warehouseTransfer(scope.row)">转仓</el-button>
          </template>
        </el-table-column>
      </el-table>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>

    <el-dialog fullscreen class="dialog-fullscreen" title="成品转仓" :visible.sync="openDialog" @closed="selectOrder=null">
      <div v-if="openDialog" style="height:100%;overflow:auto">
        <order-transfer-form :order="selectOrder" :dropdown-option="dropdownOption" @transfer-success="transferSuccess"></order-transfer-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="https://upload.shinehao.com.cn/20181222140744qiniu.min.js"></script>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css",
    "/vueSystem/components/css/imgUpload.css",
    "/purchaseOrder/companyMaterialTable/css/companyMaterialForm.css",
    "./css/queryMaterialTable.css",
    "./css/orderTransferForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/js/permissionUtil.js",
    "/vueSystem/js/checkVaildUtil.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/imgUpload.js",
    "/vueSystem/components/sysAutocomplete.js",
    "/vueSystem/components/filterSelect.js",
    "/vueSystem/models/baseModel.js",
    "/purchaseOrder/models/companyMaterialTableModel.js",
    "/vueSystem/mixins/materialFormMixin.js",
    "/purchaseOrder/models/customerModel.js",
    "/purchaseOrder/customer/customerForm.js",
    "/purchaseOrder/companyMaterialTable/companyMaterialForm.js",
    "/vueSystem/mixins/tablePaginationMixin.js"
  ]);

</script>
<script src="../queryWarehouse/productionUnitInfo.js"></script>
<script src="./searchForm.js"></script>
<script src="./queryMaterialTable.js"></script>
<script src="./orderTransferForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [tablePaginationMixin()],

    data: function () {
      var search = {
        isValid: '',
        orderId: '',
        companyOrderId: '',
        factoryNo: '',
        customerNo: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        orderList: [],
        openDialog:false,
        selectOrder:null,
        dropdownOption:{}
      };
    },

    created: function () {
      this.setOrderList(true);
    },

    methods: {
      setOrderList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        postData = {
          start: start,
          length: pageSize,
          warehouseType: 1
        };

        var search = this.search;
        var fields = ['orderId', 'companyOrderId', 'factoryNo', 'customerNo', 'isValid'];
        SysUtil.setPostData(postData, search, fields);

        this.loading = true;
        var self = this;
        ajaxRequest("companyMaterialCount/getCompanyMaterialCountList", postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var orderList = res.returnData;

          self.orderList = orderList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setOrderList(true);
      },

      pageChange:function(){
        this.setOrderList();
      },

      warehouseTransfer:function(order){
        this.selectOrder = order;
        this.openDialog = true;
      },

      transferSuccess:function(){
        this.openDialog = false;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      ProductionUnitInfo: ProductionUnitInfo,
      OrderTransferForm:OrderTransferForm
    }
  });

</script>
<style>
  .material-transfer {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .material-transfer .table-count-unit {
    text-align: center;
  }

</style>

</html>
